<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理 - 小邵改装</title>
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="{{ url_for('static', path='/css/style.css') }}" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
    <div class="container mx-auto px-4 py-8 max-w-6xl">
        <!-- 标题和导航 -->
        <div class="flex justify-between items-center mb-8">
            <div>
                <h1 class="text-3xl font-bold text-gray-800 mb-2">
                    <i class="fas fa-users-cog text-blue-600 mr-3"></i>
                    用户管理
                </h1>
                <p class="text-gray-600">管理系统用户和权限</p>
            </div>
            <div class="flex items-center space-x-4">
                <a href="/dashboard" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors duration-200">
                    <i class="fas fa-arrow-left mr-2"></i>
                    返回主页
                </a>
                <button 
                    id="logoutBtn"
                    class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg transition-colors duration-200"
                    title="退出登录"
                >
                    <i class="fas fa-sign-out-alt"></i>
                </button>
            </div>
        </div>

        <!-- 创建用户表单 -->
        <div class="bg-white rounded-2xl shadow-xl p-8 mb-8">
            <h2 class="text-xl font-semibold text-gray-800 mb-6">
                <i class="fas fa-user-plus text-green-500 mr-2"></i>
                创建新用户
            </h2>
            
            <form id="createUserForm" class="space-y-6">
                <div class="grid md:grid-cols-2 gap-6">
                    <!-- 用户名 -->
                    <div>
                        <label for="newUsername" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-user text-blue-500 mr-2"></i>
                            用户名
                        </label>
                        <input 
                            type="text" 
                            id="newUsername" 
                            name="username"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
                            placeholder="请输入用户名"
                            required
                        >
                    </div>

                    <!-- 邮箱 -->
                    <div>
                        <label for="newEmail" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-envelope text-blue-500 mr-2"></i>
                            邮箱
                        </label>
                        <input 
                            type="email" 
                            id="newEmail" 
                            name="email"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
                            placeholder="请输入邮箱"
                            required
                        >
                    </div>
                </div>

                <!-- 密码 -->
                <div>
                    <label for="newPassword" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-lock text-blue-500 mr-2"></i>
                        密码
                    </label>
                    <input 
                        type="password" 
                        id="newPassword" 
                        name="password"
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
                        placeholder="请输入密码"
                        required
                    >
                </div>
                <!-- 生成次数 -->
                <div>
                    <label for="newGenerateLimit" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-sync-alt text-blue-500 mr-2"></i>
                        生成次数
                    </label>
                    <input 
                        type="number" 
                        id="newGenerateLimit" 
                        name="generate_limit"
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
                        placeholder="默认100"
                        min="1"
                        value="100"
                    >
                </div>
                <!-- 车型权限 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-car text-blue-500 mr-2"></i>
                        车型权限
                    </label>
                    <div id="carModelPermissions" class="grid grid-cols-2 md:grid-cols-3 gap-3">
                        <!-- 车型选项将通过JavaScript动态加载 -->
                    </div>
                </div>

                <!-- 功能权限 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-cogs text-blue-500 mr-2"></i>
                        功能权限
                    </label>
                    <div id="functionPermissions" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
                        <!-- 功能选项将通过JavaScript动态加载 -->
                    </div>
                </div>

                <!-- 创建按钮 -->
                <div class="flex justify-end">
                    <button 
                        type="submit"
                        id="createUserBtn"
                        class="bg-gradient-to-r from-green-600 to-green-700 text-white py-3 px-6 rounded-lg font-medium hover:from-green-700 hover:to-green-800 transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2"
                    >
                        <i class="fas fa-user-plus mr-2"></i>
                        创建用户
                    </button>
                </div>
            </form>
        </div>

        <!-- 用户列表 -->
        <div class="bg-white rounded-2xl shadow-xl p-8">
            <h2 class="text-xl font-semibold text-gray-800 mb-6">
                <i class="fas fa-list text-purple-500 mr-2"></i>
                用户列表
            </h2>
            
            <div id="userList" class="space-y-4">
                <!-- 用户列表将通过JavaScript动态加载 -->
                <div class="text-center text-gray-500 py-8">
                    <i class="fas fa-spinner fa-spin text-2xl mb-2"></i>
                    <p>加载中...</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 加载状态 -->
    <div id="loadingOverlay" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white rounded-lg p-6 flex items-center space-x-3">
            <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
            <span class="text-gray-700">处理中...</span>
        </div>
    </div>

    <script src="{{ url_for('static', path='/js/admin.js') }}"></script>
    <script src="{{ url_for('static', path='/js/watermark.js') }}"></script>
</body>
</html> 